<template>
	<view>
		<u--form ref="form" :rules="rules" :model='formData'>
			<view class="login_title">
				欢迎注册图书坊
			</view>
			<view class="login_input">
				<view class="login_account">
					<u-form-item prop="name" style="width: 100%;height: 100%;">
						<u--input v-model="formData.name" border="none" placeholder="取一个悦耳的名称吧"></u--input>
					</u-form-item>

				</view>
				<view class="login_account">
					<u-form-item prop="password" style="width: 100%;height: 100%;">
						<u--input v-model="formData.password" type='password' border="none" placeholder="在此处输入密码">
						</u--input>
					</u-form-item>
				</view>
				<view class="login_account">
					<u-form-item prop="ispassword" style="width: 100%;height: 100%;">
						<u--input v-model="formData.ispassword" type='password' border="none" placeholder="在此处输入确认密码">
						</u--input>
					</u-form-item>
				</view>
				<view class="login_account">
					<u-form-item prop="emil" style="width: 100%;height: 100%;">
						<u--input v-model="formData.emil" border="none" placeholder="输入您要绑定的邮箱"></u--input>
					</u-form-item>
				</view>
			</view>
			<u-button text="注册" type='primary' size='default' style="width: 80%;margin-top: 40rpx;" @click="getLogin">
			</u-button>
		</u--form>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import {saveToken} from '../../tools/token.js'
	export default {
		data() {
			return {
				formData: {
					name: '',
					password: '',
					ispassword: '',
					emil: '',
				},
				rules: {
					'name': [{
							required: true,
							message: '请输入名称',
							trigger: ['blur', 'change'],
						},
						{
							min: 1,
							max: 8,
							message: '长度在1-8个字符之间',
							trigger: ['blur', 'change'],
						},
					],
					'password': [{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含大小写字和或数字',
							trigger: ['blur', 'change'],
						},
						{
							min: 6,
							max: 18,
							message: '长度在6-18个字符之间',
							trigger: ['blur', 'change'],
						},
					],
					'ispassword': {
						validator: (rule, value, callback) => {
							return this.formData.password === value
						},
						message: '请确保确认密码和密码',
						trigger: ['change', 'blur']
					},
					'emil': {
						validator: (rule, value, callback) => {
							return uni.$u.test.email(value);
						},
						message: '邮箱格式不正确',
						trigger: ['change', 'blur'],
					}
				},
			}
		},
		methods: {
			...mapMutations('indexStore', ['SETTOKEN']),
			async getLogin() {
				if (await this.$refs.form.validate()) {
					const {
						name,
						emil: email,
						password,
						ispassword: password_confirmation
					} = this.formData
					const reuslt = await uni.$u.api.reqRigser({
						name,
						email,
						password,
						password_confirmation
					})
					if (reuslt === '') {
						uni.showToast({
							title: '正在尝试为您自动登录',
							icon: 'none'
						})
						const {
							access_token
						} = await uni.$u.api.reqLoginStatus({
							email,
							password
						})
						if (access_token) {
							this.SETTOKEN(access_token)
							uni.navigateBack({
								delta: 2
							})
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.login_title {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #007AFF;
		font-weight: 700;
	}

	.login_input {
		[class^='login'] {
			margin: 0 auto;
			width: 80%;
			height: 90rpx;
			box-shadow: 0 0 10rpx #555555;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding-left: 30rpx;

			input {
				height: 100%;
				width: 100%;
				padding-left: 20rpx;
			}
		}
	}

	/deep/.u-form-item__body__right__message {
		margin-top: -55rpx;
		display: flex;
		justify-content: flex-end;
		padding-right: 50rpx;
		border: 0px;
	}

	/deep/.u-line {
		display: none;
	}
</style>
